<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表渲染</title>
  <script src="../js/vue.js"></script>
</head>
<body>
   <div id="root">
      <!-- (3) 如果没写key，则Vue默认使用index作为key
           (4) 使用index作为key的问题：
               1.在进行逆序添加、逆序删除等破坏原来顺序的操作
                 就会进行没有必要的真是DOM更新，效率很低
               2.如果还包含输入类的DOM，则界面直接会出错(错位)
           (5) key尽量使用唯一标识：id、手机号、邮箱……
               
      -->
      <ul>
        <h2>人员列表</h2>
        <button @click="add">添加一个老刘</button>
        <!-- (1) key是Vue内部使用的，一旦Vue将页面解析成真实的DOM就会把key去掉，因此浏览器上没有显示
             (2) 如果用index作为key 或者 不写key，在头部添加一个数据时，后面输入框的内容会往前挪一个
        -->
        <li v-for="(p,index) in persons" :key="index">
          {{p.name}} ---- {{p.age}}
          <input type="text">
        </li>
      </ul>

   </div>
    <script type='text/javascript'>
        new Vue({
            el:'#root',
            data:{
              name:'aaa',
              persons:[
                {id:1,name:'zhoujie1', age:18},
                {id:2,name:'zhoujie2', age:19},
                {id:3,name:'zhoujie3', age:20}
              ]
            },
            methods: {
              add(){
                const p = {id:4,name:'zhoujie4',age:21}
                // (2)unshift在第一个位置处添加，shift是在第一个位置处删除
                this.persons.unshift(p)
              }
            },
        })
    </script>
</body>
</html>